<!-- 管理员用户管理侧边栏 -->

<!-- 首页界面 -->

<template>
  <div >
    <el-container id="bg">
      <!-- <el-aside width="200px"> --><!-- 侧边栏 -->


       

        <el-menu router :default-openeds="['', '']"  
        
        active-text-color="#ffd04b" :collapse="isCollapse"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"><!-- //菜单栏 -->

        <el-submenu 
        v-if="user.role == '1'"
         index="8"  class="game-menu">
        
          <template slot="title">
            <i class="el-icon-user" style="color:white;font-size: 24px; font-weight: bold;"></i>
            <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">用户管理</span>
            <!-- <i class="el-icon-user" style="color:white;"></i>
            <span slot="title" style="color:white;">用户管理</span> -->
          </template>
          <el-menu-item-group class="game-menu1">
          <el-menu-item index="/userview"  >
            <span style="color: white;font-size: 20px; font-weight: bold;">
            <!--   <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i> -->
              用户管理</span>
            
          </el-menu-item>
        </el-menu-item-group>

          

        </el-submenu>

        <el-submenu 
        v-if="user.role == '1'"
         index="1" class="game-menu"><!-- //游戏商城 -->
        
          <template  slot="title" >
            
            <i class="el-icon-menu" style="color:white;font-size: 24px; font-weight: bold;"></i>
            <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">游戏商城</span>
            
          </template>

          
          <el-menu-item-group class="yun1">
            
            <template slot="title" >
              
              <span style="color:white;font-size: 14px; font-weight: bold;">热门游戏</span></template>

            <el-menu-item index="/adgame"   @click="addTab(editableTabsValue)" >
              <i class="el-icon-sunny" style="color:white;font-size: 24px; font-weight: bold;"></i>
              <span style="color:white;font-size: 20px; font-weight: bold;">首页</span></el-menu-item>

            <el-menu-item index="/adgame"><span
                style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                <i class="el-icon-sunset" style="color:white;font-size: 24px; font-weight: bold;"></i>
                闯关</span></el-menu-item>

          </el-menu-item-group>

          <el-menu-item-group   class="yun2">
            <template slot="title" ><span style="color:white;font-size: 14px; font-weight: bold;">单人游戏</span></template>

            <el-menu-item index="/adgame"><span
                style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                <i class="el-icon-sunrise-1" style="color:white;font-size: 24px; font-weight: bold;"></i>
                休闲</span></el-menu-item>

          </el-menu-item-group>

          <el-menu-item-group  class="yun4">
            <template slot="title" ><span style="color:white;font-size: 14px; font-weight: bold;">快速游戏</span></template>

            <el-menu-item index="adgame"><span
                style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                <i class="el-icon-mobile-phone" style="color:white;font-size: 24px; font-weight: bold;"></i>
                小游戏</span></el-menu-item>

          </el-menu-item-group>
          
        </el-submenu>

        <el-submenu
        v-if="user.role == '1'"
        index="2" class="game-menu"><!-- //游戏管理 -->

          <template slot="title">
            <i class="el-icon-coordinate" style="color:white;font-size: 24px; font-weight: bold;"></i>
            <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">游戏管理</span>
          </template>

          <el-menu-item-group class="game-menu1">

            <el-menu-item index="/adgameku"><span
                style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                <i class="el-icon-s-home" style="color:white;font-size: 24px; font-weight: bold;"></i>
                游戏库管理</span></el-menu-item>

            <el-menu-item index="/adcollect"><span
                style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                <i class="el-icon-collection-tag" style="color:white;font-size: 24px; font-weight: bold;"></i>
                收藏管理</span></el-menu-item>

            <el-menu-item 
            v-if="user.role == '3'"
            index="/collectable"><span style="color: white;font-size: 20px; font-weight: bold;">
              <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
              分类管理</span></el-menu-item>

          </el-menu-item-group>

        </el-submenu>

        <!--  //购物车 -->
           
           <el-submenu
           v-if="user.role == '1'"
           index="3" class="game-menu"><!-- //游戏管理 -->
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-shopping-cart-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">购物车</span>
               <el-badge value="new" class="badge-custom"  v-if="showBadge">
               </el-badge>
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/adshopcar" @click="toggleBadge">
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-shopping-bag-1" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   购物车商品管理
                  </span>
                  <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge>
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>
         





           <!-- //订单管理 -->
           <el-submenu
           v-if="user.role == '1'"
           index="4" class="game-menu"><!-- //订单管理 -->
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-s-order" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">订单管理</span>
               <el-badge value="new" class="badge-custom"  v-if="showBadge">
               </el-badge>
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/adorder" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-s-claim" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   商品订单管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>









           <!-- 个人信息管理 -->
           <el-submenu
           v-if="user.role == '1'"
           index="5" class="game-menu">
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-user-solid" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">个人信息</span>
               
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/adnew" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-s-custom" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   个人信息管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>

                <el-menu-item index="/adreset" >
                  <div style="position:relative;display:flex;align-items:center;">
                  <span
                     style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                     <i class="el-icon-s-custom" style="color:white;font-size: 24px; font-weight: bold;"></i>
                     修改密码管理
                    </span>
                    <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                  </div>
                  </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>










           <!-- 资产管理 -->
           <el-submenu
           v-if="user.role == '1'"
           index="6" class="game-menu">
 

           
             <template slot="title">
              <div style="position:relative;align-items:center;">
               <i class="el-icon-office-building" style="color:white;font-size: 24px; font-weight: bold;"></i>
               
               <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">资产管理</span>
               
              </div>
             </template>
            
 
             <el-menu-item-group class="game-menu1">
 
               <el-menu-item index="/adpayment" >
                <div style="position:relative;display:flex;align-items:center;">
                <span
                   style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                   <i class="el-icon-coin" style="color:white;font-size: 24px; font-weight: bold;"></i>
                   余额管理
                  </span>
                  <!-- <el-badge value="new" class="badge-custom"  v-if="showBadge"></el-badge> -->
                </div>
                </el-menu-item>
 
          
 
             </el-menu-item-group>
 
           </el-submenu>


           <el-submenu
          v-if="user.role == '1'"
          index="11" class="game-menu"><!-- //游戏管理 -->

            <template slot="title">
              <i class="el-icon-s-home" style="color:white;font-size: 24px; font-weight: bold;"></i>
              <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">游戏设置</span>
            </template>

            <el-menu-item-group class="game-menu1">

              <el-menu-item index="/adgamelist"><div
                  style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;" >
                  <i class="el-icon-s-home" style="color:white;font-size: 24px; font-weight: bold;"></i>
                  游戏信息管理</div></el-menu-item>

              <el-menu-item index="/collectable" v-if="user.role == '2'"><span
                  style="text-decoration:none; color:white;font-size: 20px; font-weight: bold;">
                  <i class="el-icon-collection-tag" style="color:white;font-size: 24px; font-weight: bold;"></i>
                  收藏管理</span></el-menu-item>

              <!-- <el-menu-item index="/sortview"><span style="color: white;font-size: 20px; font-weight: bold;">
                <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
                分类管理</span></el-menu-item> -->

            </el-menu-item-group>

          </el-submenu>

          <el-submenu v-if="user.role == '1'"
          index="10" class="game-menu">
          <template slot="title">
            <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
            <span slot="title" style="color:white;font-size: 24px; font-weight: bold;">分类管理</span>
          </template>
          <el-menu-item-group   class="game-menu1">
          <el-menu-item index="/adsort"><span style="color: white;font-size: 20px; font-weight: bold;">
            <i class="el-icon-notebook-2" style="color:white;font-size: 24px; font-weight: bold;"></i>
            分类管理</span></el-menu-item>
          </el-menu-item-group>

        </el-submenu>





         

        </el-menu>

      <!-- </el-aside> -->

      <el-container>

        <el-header class="headercolor">
          
        <!--   导航栏收起按钮 -->
         <!--  <el-radio-group v-model="isCollapse" style="float:left;margin-top:20px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group> -->
          <el-button @click="toggleCollapse"  style="float: left; ">
            <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="font-size: 30px;;"></i>
           <!--  {{ isCollapse ? '展开' : '收起' }} -->
          </el-button>
          

          <el-dropdown style="float: left;margin-left: 10px;">
            
            <label for="setting">
              <el-avatar
              :size=55
                :src="'http://47.99.51.143:9000/files/' + user.image"></el-avatar>
                
            <span style="margin-left: 10px; font-size:20px;top:0px;position:relative;color:pink;">{{ user.name }}</span>
            <i class="el-icon-setting" ></i>

            <el-dropdown-menu   slot="dropdown" id="setting">

              <el-dropdown-item ><div @click="userEdit()">个人信息</div>
                </el-dropdown-item>

              <el-dropdown-item><router-link to="/" style="text-decoration:none;color:black;">退出登录</router-link></el-dropdown-item>

              <el-dropdown-item><div @click="passwordEdit()">修改密码</div></el-dropdown-item>

            </el-dropdown-menu>

          </label>
          </el-dropdown>



          
          <div  class="lg-word" :class="[wordFlag ? 'lg-done' : '']">
           
            <span class="w-base">游</span>
            <span class="w-base">戏</span>
            <span class="w-base">服</span>
            <span class="w-base">务</span>
            <span class="w-base">管</span>
            <span class="w-base">理</span>
            <span class="w-base">后</span>
            <span class="w-base">台</span>
            <span class="w-base">系</span>
            <span class="w-base">统</span>
           
          </div>

          
          <el-dialog title="个人信息修改"   draggable :visible.sync="userFormVisible" >
            <el-form :model="userform">
              <el-form-item label="账户名" prop="name" label-width="15%">
            <el-input
            v-model="userform.name"
            autocomplete="off"
            > </el-input></el-form-item>
  
            <el-form-item label="昵称" prop="pet" label-width="15%">
              <el-input 
              v-model="userform.pet"
              autocomplete="off"
              > </el-input></el-form-item>
  
  
  
  
              <!-- <el-form-item label="头像" label-width="15%">
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  action="http://47.99.51.143:9000/files/upload"
                  :on-success="successUserUpload"
                
                  style="float: left; margin-left: 20px"
                >
                <img v-if="userform.image" :src="'http://47.99.51.143:9000/files' + userform.image" class="avatar">
  
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 
  
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item> -->
  
  
              <el-form-item label="头像" >
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  action="http://47.99.51.143:9000/files/upload"
                  
                  :on-success="successUserUpload"
                  style="float: left; margin-left: 20px"
                >
                <img v-if="userform.image" :src="'http://47.99.51.143:9000/files/' + userform.image" class="avatar">
        
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                 
        
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-form-item>
              
  
  
  
  
  
  
             <!--  <el-form-item label="性别" prop="gender" label-width="15%">
                <el-input 
                v-model="userform.gender"
                autocomplete="off"
                >  </el-input></el-form-item> -->
  
  
                <el-form-item label="性别" prop="gender" label-width="15%">
                  <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                     <el-option
                      v-for="item in genderList"
                      :key="item.value"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
  
  
                <el-form-item label="手机号" prop="phone" label-width="15%">
                  <el-input 
                  v-model="userform.phone"
                  autocomplete="off"
                  > </el-input></el-form-item>
                 
                  <el-form-item label="邮箱" prop="email" label-width="15%">
                    <el-input 
                    v-model="userform.email"
                    autocomplete="off"
                    > </el-input></el-form-item>
  
  
  
                    
            </el-form>
  
  
  
  
  
            <div slot="footer" class="dialog-footer">
              <el-button @click="userFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="userSubmit()">确 定</el-button>
            </div>
          </el-dialog>
          



          <!-- //修改密码表单 -->

          <el-dialog title="修改密码" :visible.sync="passwordFormVisible" width="30%">
            <el-form :model="userform">

              <el-form-item label="账户" disabled prop="name" label-width="15%">
                <el-input type="text" v-model="userform.name" autocomplete="off"></el-input>
              </el-form-item>

            <el-form-item label="旧密码" prop="password" label-width="15%">
              <el-input type="password" v-model="userform.password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="新密码" prop="password1" label-width="15%">
              <el-input type="password" v-model="userform.newpassword" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="确认密码" prop="password2" label-width="15%">
              <el-input type="password" v-model="userform.comfirmpassword" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="passwordFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="changePasswordSubmit()">确 定</el-button>
            </div>
          </el-dialog>

      </el-header>

        
       <!--  <el-main>
          
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
              <br><br>
              <el-form-item label="游戏名" class="game-label">
                
                <el-input v-model="searchForm.game_name" placeholder="游戏名"></el-input>
              </el-form-item>
  
  
              <el-form-item label="游戏类型" class="game-label">
  
                <el-input v-model="searchForm.category" placeholder="游戏类型"></el-input>
  
              </el-form-item>
  
  
  
              <el-form-item label="发行日期" class="game-label">
                <el-date-picker v-model="release_date" 
                clearable
                value-format="yyyy-MM-dd"
                type="daterange"
                placeholder="选择日期"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 400px; margin-left: 20px"
              ></el-date-picker>
            </el-form-item>
      
  
  
  
              <el-form-item>
                <el-button type="warning" @click="onSubmit()">搜索</el-button>
              </el-form-item>

              <el-button type="info" @click="clear">清空</el-button>

  
              <el-form-item>
                <el-button type="primary" @click="add()" style="margin-left: 1050px">新增</el-button>
              </el-form-item>
  
  
            </el-form>
  
  
            <div class="table-container">
            <el-table :data="tableData" style="width: 100%; " border>
              <el-table-column prop="game_name" label="游戏名" width="180"> </el-table-column>
              
  
              <el-table-column  label="图片">
                <template v-slot="scope">
                  <el-image
                    style="width: 140px; height: 100px; border-radius: 0%"
                    :src="'http://47.99.51.143:9000/files/' + scope.row.game_image"
                    :preview-src-list="['http://47.99.51.143:9000/files/' + scope.row.game_image]"
                  ></el-image>
                </template>
              </el-table-column>








              
              
              
  
              <el-table-column prop="is_purchased" label="是否购买" width="140">
                <template slot-scope="scope">
                  {{ scope.row.is_purchased == 1 ? '已购买' : '未购买' }}
                </template>
              </el-table-column>
  
              <el-table-column prop="game_description" label="游戏描述"> </el-table-column>
              <el-table-column prop="release_date" label="发行日期"> </el-table-column>
              <el-table-column prop="category" label="种类"> </el-table-column>
  
              <el-table-column label="操作" width="200">
                <template slot-scope="scope">
  
                  <el-button type="primary" size="medium"> <router-link to="/shop"
                      style="text-decoration:none">详情页</router-link></el-button>

               
                    &nbsp;&nbsp;
                 
                  <el-popconfirm
                   confirm-button-text='好的'
                  cancel-button-text='不用了'
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定删除吗？"
                  @confirm="handleDelete(scope.row.id)"
                >
                  <el-button slot="reference" >删除</el-button>
                </el-popconfirm>
              



                  <br><br>
                  <el-button type="primary" size="medium"  @click="edit(scope.row)">编辑</el-button>
  
                </template>
              </el-table-column>
  
            </el-table>
            </div>
  
           
              <el-dialog title="信息修改" :visible.sync="dialogFormVisible" width="30%">
                <el-form :model="form">
                  <el-form-item label="游戏名" prop="game_name" label-width="15%">
                <el-input 
                v-model="form.game_name"
                autocomplete="off"
                > </el-input></el-form-item>




                  <el-form-item label="图片" label-width="15%">
                    <el-upload
                      class="avatar-uploader"
                      :show-file-list="false"
                      action="http://47.99.51.143:9000/files/upload"
                      :on-success="successUpload"
                    
                      style="float: left; margin-left: 20px"
                    >
                    <img v-if="form.game_image" :src="'http://47.99.51.143:9000/files/' + form.game_image" class="avatar">

                     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                     

                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>



                  






               

                    <el-form-item label="是否购买" prop="is_purchased" label-width="15%">
                      <el-select v-model="form.is_purchased" placeholder="请选择" style="width:100%" >
                         <el-option
                          v-for="item in genderList"
                          :key="item.value"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>





                    <el-form-item label="游戏描述" prop="game_description" label-width="15%">
                      <el-input 
                      v-model="form.game_description"
                      autocomplete="off"
                      > </el-input></el-form-item>
                      <el-form-item label="发行日期" prop="release_date" label-width="15%">
                        <el-input 
                        v-model="form.release_date"
                        autocomplete="off"
                        > </el-input></el-form-item>



                        <el-form-item label="种类" prop="category" label-width="15%">
                          <el-input 
                          v-model="form.category"
                          autocomplete="off"
                          > </el-input></el-form-item>
                </el-form>





                <div slot="footer" class="dialog-footer">
                  <el-button type="info" @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="submit()">确 定</el-button>
                </div>
              </el-dialog>
  
  
            
              
              <el-dialog title="个人信息修改" :visible.sync="userFormVisible" width="30%">
                <el-form :model="userform">
                  <el-form-item label="账户名" prop="name" label-width="15%">
                <el-input
                v-model="userform.name"
                autocomplete="off"
                > </el-input></el-form-item>

                <el-form-item label="昵称" prop="pet" label-width="15%">
                  <el-input 
                  v-model="userform.pet"
                  autocomplete="off"
                  > </el-input></el-form-item>




                  


                  <el-form-item label="头像" >
                    <el-upload
                      class="avatar-uploader"
                      action="http://47.99.51.143:9000/upload"
                      
                      name="image"
                      :show-file-list="false"
                      :on-success="successUserUpload"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="userform.image" :src="userform.image" class="avatar" />
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                  </el-form-item>
                  






                 

                    <el-form-item label="性别" prop="gender" label-width="15%">
                      <el-select v-model="userform.gender" placeholder="请选择" style="width:100%" >
                         <el-option
                          v-for="item in genderList"
                          :key="item.value"
                          :label="item.name"
                          :value="item.id"
                        />
                      </el-select>
                    </el-form-item>


                    <el-form-item label="手机号" prop="phone" label-width="15%">
                      <el-input 
                      v-model="userform.phone"
                      autocomplete="off"
                      > </el-input></el-form-item>
                     
                      <el-form-item label="邮箱" prop="email" label-width="15%">
                        <el-input 
                        v-model="userform.email"
                        autocomplete="off"
                        > </el-input></el-form-item>



                        
                </el-form>





                <div slot="footer" class="dialog-footer">
                  <el-button @click="userFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="userSubmit()">确 定</el-button>
                </div>
              </el-dialog>








          
        </el-main> -->


        <el-main>
          <router-view></router-view>
        </el-main>


        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>

       

      </el-container>

    </el-container>

  </div>





</template>

<script>
import request from '@/request/request.js';


export default {
  data() {
    return {
      wordFlag: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},

      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      dialogFormVisible: false,
      isCollapse: true,
      form: {},
      userFormVisible: false,
      passwordFormVisible: false,
      userform: {
        image: "",
        newpassword: "",
        comfirmpassword: "",
      },
      tableData: [],
      genderList: [{ id: 1, name: "男" }, { id: 2, name: "女" }],
      searchForm: {
        game_name: "",
        category: ""
      },
      release_date: ""
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    userEdit() {
      request.get("/user/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.userform = res.data;
          this.user = res.data;
          localStorage.setItem("user", JSON.stringify(res.data));
          this.userFormVisible = true;
        }
      })
    },
    passwordEdit() {
      request.get("/user/" + this.user.id).then((res) => {
        if (res.code === "0") {
          this.userform.name = res.data.name;
          this.userform.id = res.data.id;
          this.passwordFormVisible = true;
        }
      })
    },
    changePasswordSubmit() {
      if (this.userform.newpassword !== this.userform.comfirmpassword) {
        this.$message.error("两次密码输入不一致");
      }
      else {
        this.userform.password = this.userform.newpassword;
        request.post("/user", this.userform).then((res) => {
          if (res.code === "0") {
            this.$message.success({ message: "修改成功", type: "success" });
            this.userform = res.data;
            this.userform.password = "";
            this.userform.newpassword = "";
            this.userform.comfirmpassword = "";
            this.passwordFormVisible = false;
          } else {
            this.$message({ message: "修改失败", type: "error" });
          }
        });
      }
    },

    edit(obj) {
      this.form = obj;
      this.dialogFormVisible = true;
    },
    successUpload(res) {
      console.log(res);
      this.form.game_image = res.data;
    },
    successUserUpload(res, file) {
      console.log(res);
      console.log(file);
      this.userform.image = res.data;
      this.user.image = res.data;
      localStorage.setItem("user", JSON.stringify(this.user));
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    add() {
      this.form = {};
      this.dialogFormVisible = true;

    },
    userSubmit() {
      request.post("/user", this.userform).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "修改成功", type: "success" });
          //更新本地缓存
          /* localStorage.setItem("user", JSON.stringify(res.data)); */
          this.userFormVisible = false;

        } else {
          this.$message({ message: "修改失败", type: "error" });
        }
      });
    },
    /* submit() {
      request.post("/games", this.form).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "新增成功", type: "success" });
          this.dialogFormVisible = false;
          this.load();
        } else {
          this.$message({ message: "新增失败", type: "error" });
        }
      });
    },
    handleDelete(id) {
      request.delete("/games/" + id).then((res) => {
        if (res.code === "0") {
          this.$message.success({ message: "删除成功", type: "success" });
          this.load();
        } else {
          this.$message({ message: "删除失败", type: "error" });
        }
      });
    }, */
    viewDetails(id) {
      alert("查看详情：" + id);
      // 可以根据 id 加载对应游戏的详情页
    },
    /* clear(){
      this.searchForm = {game_name: "", category: ""};
      this.load();
      
      this.page();
    },
    onSubmit() {
      request.get("/games/search", { params: this.searchForm }).then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          this.$message({ message: "查询失败", type: "error" });
        }
      });
    }, */
    handleSizeChange(val) {
      alert("每页记录数发生变化" + val);
    },
    handleCurrentChange(val) {
      alert("页码发生变化" + val);
    },
    /* load() {
      request.get("/games").then((res) => {
        if (res.code === "0") {
          this.tableData = res.data;
        } else {
          alert(res.msg);
        }
      });
    } */
  },
  created() {

  },
  mounted() {
    // 页面加载完成后，开始动画
    setTimeout(() => {
      this.wordFlag = true
    }, 200)
  },
  computed: {

  }
};
</script>
  
<style scoped>
@import '../../css/vue.css';
/*引入自定义的css*/
</style> 
  
  
  